<template>
  <div>

    <p @click="$router.go(-1)" class="bargain_list_details_return">&lt;</p>


    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in bargain_list_details_swiper.pics2" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>

    <div class="bargain_list_describe">
      <h5>{{bargain_list_details.characteristic}}</h5>
      <p>{{bargain_list_details.name}}</p>
      <p><span style="color:red;">{{"低价"+bargain_list_details.minPrice}}</span> <span
          style="color:#ccc;margin-left: 5vw;">{{"原价"+bargain_list_details.originalPrice}}</span> <span
          style="color:darkgrey;float:right;">{{"库存"+bargain_list_details.stores}}</span>
      </p>
    </div>



    <van-tabs v-model="active"  class="main">
      <van-tab title="商品详情" >
        <div class="bargain_list_describe_content" v-html="bargain_list_details_swiper.content">
        </div>
      </van-tab>
      <van-tab title="商品评价">商品评价</van-tab>

    </van-tabs>
    <van-goods-action>
      <van-goods-action-button type="danger" text="立即发起砍价，最低可砍到1元" />

    </van-goods-action>

  </div>
</template>

<script>
  import headers from '../../components/headers.vue'
  import Vue from 'vue';
  import {
    Lazyload
  } from 'vant';

  Vue.use(Lazyload);
  export default {
    components: {
      headers
    },
    data() {
      return {
        bargain_list_details_id: '',
        bargain_list_details: [],
        bargain_list_details_swiper: []
      }
    },


    mounted() {
      this.bargain_list_details_id = this.$route.query.id;
      this.$API.shop_detail(this.bargain_list_details_id).then((res) => {
        // console.log(res);
        this.bargain_list_details_swiper = res.data.data
        this.bargain_list_details = res.data.data.basicInfo
      }).catch((err) => {
        console.log(err);
      });
    },
  }
</script>

<style lang="scss">
  .main ul li {
    height: 4vh;
    line-height: 4vh;
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .bargain_list_details_return {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    background-color: #fff;
    border: 1px solid #ccc;
    z-index: 999;
    position: fixed;
    top: 1vh;
    left: 2vw;

  }

  .van-swipe {
    width: 100vw;
    height: 55vh;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .bargain_list_describe {
    padding: 0 5vw;

    h5 {
      margin-top: 2vh;
    }

    p {
      margin-top: 1vh;
      font-size: 12px;
      color: #ccc;

    }

  }

  .bargain_list_describe_content {

    margin-top: 2vh;
    width: 100vw;
    height: auto;

    img {
      width: 100% !important;
      height: 100% !important;
    }

  }
</style>